<template>
	<base-popup
		:modelValue="walletStore.walletDepositShow"
		@close="onClose"
		title-class="title-class">
		<template #left>
			<div class="flex items-center gap-1">
				<base-icon name="download" size="24" class="text-t-3" />
				<div class="text-lg">
					<base-text class="text-t-2" text-t="wallet.title" />
					<span class="text-t-2">&nbsp;/&nbsp;</span>
					<base-text text-t="wallet.deposit" />
				</div>
			</div>
		</template>
		<template #title>
			<div class="pt-[50px] pb-3 text-center text-xl relative bg-gradient-1 rounded-t-[10px]">
				<base-switch-tabs
					v-model="tab"
					:data="tabList"
					style="--height: 40px; --bg-color: var(--color-bg-3)"
					translation
					activeTextBold />
			</div>
		</template>
		<div>
			<n-scrollbar>
				<DepositCrypto v-if="tab === 'crypto'" />
				<DepositFiat v-if="tab === 'fiat'" />
				<DepositBuyCrypto v-if="tab === 'buy-crypto'" />
			</n-scrollbar>
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { find } from 'lodash-es'
import { NScrollbar } from 'naive-ui'
import { router } from '@/router'
import { useWalletStore } from '@/store'
import {
	BaseIcon,
	BasePopup,
	BaseSwitchTabs,
	BaseText,
	SwitchTabsItem,
	SwitchTabsType
} from '@/components/base'
import DepositCrypto from './deposit-crypto.vue'
import DepositFiat from './deposit-fiat.vue'
import DepositBuyCrypto from './deposit-buy-crypto.vue'

defineOptions({ name: 'ViewsWalletDeposit' })

const walletStore = useWalletStore()
const tabList: SwitchTabsType = [
	{ id: 'crypto', name: 'wallet.crypto' },
	{ id: 'fiat', name: 'wallet.fiat' },
	{ id: 'buy-crypto', name: 'wallet.buyCrypto' }
]
const getTabItem = () =>
	find(tabList, { id: router.currentRoute.value.query?.tab }) as SwitchTabsItem | undefined
const tab = ref<string | number>(getTabItem()?.id || 'crypto')

const onClose = () => walletStore.setWalletDepositShow(false)

watch(tab, (id) => router.replace({ query: { tab: id, modal: 'wallet-deposit' } }))
watch(
	() => router.currentRoute.value.query?.tab,
	() => {
		const id = getTabItem()?.id
		!!id && (tab.value = id)
	}
)
</script>

<style lang="scss" scoped></style>
